import NoteItem from "@/app/[language]/note/components/NoteItem";
import useGetNote from "@/app/[language]/note/query/useGetNote";

import { useNoteStore } from "@/state/Stores";
import { observer } from "mobx-react-lite";
import { useLayoutEffect, useState } from "react";
import { Col, ListGroup, Row } from "reactstrap";
import { useWindowArea } from "taehui-ts/fe-utilities";

export default observer(() => {
  const { wantAvatar, viewUnit } = useNoteStore();

  const {
    data: { notes },
    isFetched: isNoteLoaded,
  } = useGetNote();

  const { windowLength } = useWindowArea();
  const [table, setTable] = useState(1);

  useLayoutEffect(() => {
    setTable(windowLength < 992 ? 1 : 2);
  }, [windowLength]);

  return (
    <Row className="g-0">
      {[...Array(table).keys()].map((i) => {
        if (isNoteLoaded) {
          return (
            <Col className="m-1" key={i}>
              <ListGroup>
                {notes
                  .slice((viewUnit / table) * i, (viewUnit / table) * (i + 1))
                  .map(
                    ({
                      noteID,
                      artist,
                      title,
                      genre,
                      levelText,
                      level,
                      topCount,
                      totalCount,
                    }) => (
                      <NoteItem
                        key={noteID}
                        noteID={noteID}
                        artist={artist}
                        title={title}
                        genre={genre}
                        levelText={levelText}
                        level={level}
                        topCount={topCount}
                        totalCount={totalCount}
                        wantAvatarName={wantAvatar}
                      />
                    ),
                  )}
              </ListGroup>
            </Col>
          );
        }

        return (
          <Col className="m-1" key={i}>
            <ListGroup>
              {[...Array(viewUnit / table).keys()].map((i) => (
                <NoteItem
                  key={i}
                  noteID=""
                  artist=""
                  title="Loading…"
                  genre=""
                  levelText=""
                  level={0}
                />
              ))}
            </ListGroup>
          </Col>
        );
      })}
    </Row>
  );
});